<template>
	<view class="home-page">
		<view class="banner">
			<view class="search-box">
				<uv-search :disabled="true" @click="goto()" :showAction='false' bgColor="rgba(255,255,255,0.5)"
					placeholder="请输入搜索内容" v-model="keyword"></uv-search>
			</view>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item v-for="item in bannerList" :key="item">
					<div class="bannerimg">
						<image :src="item.urlPath" mode="aspectFill"></image>
					</div>
				</swiper-item>
			</swiper>
		</view>
		<!-- class="home-nav" -->
		<uv-grid :customStyle="{background:' #fff',padding: '30rpx 0px'}" :col="4" :border="false" @click="click">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<view class="grid-img" @click="more('/pages/service/service',item.healthId)">
					<image :src="item.healthPathIcon" mode="aspectFill"></image>
				</view>
				<text class="grid-text" @click="more('/pages/service/service',item.healthId,index)">{{item.healthName}}</text>
			</uv-grid-item>
		</uv-grid>
		<view class="Pack-box">
			<image src="/static/images/Pack.png" mode="widthFix"></image>
		</view>
		<view class="section" v-if="jsListData.length">
			<SectionHeader title="技师服务" @click="more('/pages/technician/technician')" />
			<view class="TechnicianService-list">
				<TechnicianServiceItem v-for="item in jsListData" :item="item" :key="item" />
			</view>
		</view>
		<view class="section" v-if="zlServicePackData.length">
			<SectionHeader title="足疗服务" @click="more('/pages/service/service',1,1)" />
			<view class="good-list">
				<GoodItem v-for="item in zlServicePackData" :item="item" :key="item" />
			</view>
		</view>
		<view class="section" v-if="physiotherapy.length">
			<SectionHeader title="理疗服务" @click="more('/pages/service/service',2,2)" />
			<view class="good-list">
				<GoodItem v-for="item in physiotherapy" :item="item" :key="item" />
			</view>
		</view>
	</view>
</template>

<script>
	import SectionHeader from '@/components/section-header/section-header.vue'
	import TechnicianServiceItem from '@/components/TechnicianService-item/TechnicianService-item.vue'
	import GoodItem from '@/components/goods-item/goods-item.vue'
	export default {
		components: {
			SectionHeader,
			TechnicianServiceItem,
			GoodItem
		},
		data() {
			return {
				indicatorDots: true,
				keyword: null,
				baseList: [
					// 	{
					// 	title: '助睡眠',
					// 	image: '/static/images/home-nav/nav-01.png'
					// }, {
					// 	title: '调肩颈',
					// 	image: '/static/images/home-nav/nav-02.png'
					// }, {
					// 	title: '助消化',
					// 	image: '/static/images/home-nav/nav-03.png'
					// }, {
					// 	title: '抗皱',
					// 	image: '/static/images/home-nav/nav-04.png'
					// }, 
				],
				jsListData: [],
				zlServicePackData: [],
				physiotherapy: [],
				bannerList: [],
			}
		},
		mounted() {
			this.getList();
			this.getClass()
		},
		onShow() {
			console.log(1)
		},
		methods: {
			async getClass() {
				const res = await this.muajax.healthClassification({})
				let arr = res.rows.map(v => {
					return {
						...v,
						name: v.healthName
					}
				})
				this.baseList = this.baseList.concat(this.handleTree(arr, 'healthId', 'parentId', 'children'))
			},
			/**
			 * 构造树型结构数据
			 * @param {*} data 数据源
			 * @param {*} id id字段 默认 'id'
			 * @param {*} parentId 父节点字段 默认 'parentId'
			 * @param {*} children 孩子节点字段 默认 'children'
			 */
			handleTree(data, id, parentId, children) {
				const config = {
					id: id || 'id',
					parentId: parentId || 'parentId',
					childrenList: children || 'children'
				};
				const childrenListMap = {};
				const tree = [];
				for (const d of data) {
					const id = d[config.id];
					childrenListMap[id] = d;
					if (!d[config.childrenList]) {
						d[config.childrenList] = [];
					}
				}
				for (const d of data) {
					const parentId = d[config.parentId];
					const parentObj = childrenListMap[parentId]
					if (!parentObj) {
						tree.push(d);
					} else {
						parentObj[config.childrenList].push(d)
					}
				}
				return tree;
			},
			getList() {
				this.gettechnician()
				this.getfootData()
				this.getphysiotherapy()
				this.getBaaner()
			},
			async getBaaner() {
				const res = await this.muajax.getBanner()
				if (res.code == 200) {
					this.bannerList = res.data
				}
			},
			// 理疗
			async gettechnician() {
				const res = await this.muajax.getJsServe({
				userIlk: 1,
				pageSize: 10,
				pageNum:1,
				})
				if (res.code == 200) {
					this.jsListData = res.rows
					this.jsListData.forEach(v=>{
						v.healthName=v.healthName?v.healthName.split(','):[v.healthName]
					})
				}
			},
			// 足疗
			async getfootData() {
				const res = await this.muajax.getService({
					healthType: 1
				})
				this.zlServicePackData = res.rows
			},
			async getphysiotherapy() {
				const res = await this.muajax.getService({
					healthType: 2
				})
				this.physiotherapy = res.rows

			},
			// 跳转到搜索页
			goto() {
				console.log(111)
				// uni.navigateTo({
				// 	url:'/pages/service/service'
				// })
				uni.switchTab({
					url:'/pages/service/service'
				})
			},
			more(url, type,index) {
				uni.reLaunch({
					url: `${url}?type=${type}&&index=${index}`
				})

			},
			click(name) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `点击了第${name}个`
				// })
			}
		}
	}
</script>

<style scoped lang="less">
	image {
		width: 100%;
		height: 100%;
	}

	.home-page {
		background: #f1f1f1;
	}

	.search-box {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	.banner {
		width: 100%;
		height: 350rpx;
		position: relative;

		.swiper {
			height: 100%;
		}

		.bannerimg {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.grid-img {
		width: 88rpx;
		height: 88rpx;
		margin: 0px auto;

	}


	.grid-text {
		color: #666;
		margin-top: 20rpx;
	}

	.Pack-box {
		width: 690rpx;
		margin: 0px auto;
		padding-top: 16rpx;
		padding-bottom: 32rpx;
	}
</style>